<template>
  <view class="page-warper bg-gray">
    <view class="page-warper-content" v-if="!isToken">
      <pk-input @change="onChange" :isBtn="true" v-model="keyword" placeholder="请输入关键字">
        <template #suffix>
          <view class="icon-search"></view>
        </template>
      </pk-input>
    </view>
    <view class="page-warper-filter mt-24 mb-24" v-if="!isToken">
      <pk-btn size="small" isBlank @click="handerAlign" :round="true" v-if="!isLoading">
        <view class="f-14 page-warper-refresh" >换一批</view>
      </pk-btn>
      <pk-btn size="small" isBlank  :round="true" v-if="isLoading">
        <view class="page-warper-loading" ></view>
      </pk-btn>
    </view>
    <view class="page-warper-body" v-if="!isToken">
      <pk-scroll :loading="loading">
        <view style="padding: 0 32rpx 32rpx 32rpx">
          <view v-for="(item, index) in data" :key="index" class="mb-24">
            <interview-card :data="item" @onDetail="onDetail" @onLogin="isToken=true" v-if="item.job_id"></interview-card> 
          </view>
        </view>
      </pk-scroll>
    </view>
    <view class="flex-1 relative flex-col" v-if="isToken">
      <pk-authuser @onLogin="onLogin" @onClose="closeBtn" :isClose="true"></pk-authuser>
    </view>
  </view>
</template>

<script setup>
 import interviewCard from './component/interviewcard.vue'
 import { recommendList, getRecommendList } from '@/api/api'
 import { ref, computed } from 'vue'
 import WXLOG from '@/utils/log'
 import { getItem } from '@/utils/store'
 import { onShow, onShareAppMessage, onShareTimeline, onLoad } from '@dcloudio/uni-app'
 import { useInfoStore } from '@/store/info'

 const userInfo = useInfoStore()
 const page = ref(1)
 const keyword = ref('') 
 const data = ref([])
 const cbList = ref([])
 const loading = ref(false)
 const isToken = ref(false)

 const isLoading = computed(() => {
  return (loading.value && cbList.value.length < 10)
 })

onShareAppMessage(() => {
  return {
    title: '伯乐AI-模拟面试',
    path: 'pages/simulation/index', 
   }
})

onShareTimeline(() => {
  return {
    title: '伯乐AI-模拟面试',
    path: 'pages/simulation/index', 
   }
})


 const onDetail = (e) => {
  cbList.value.push(e)
 }
 const getInit = () => {
  loading.value = true
  data.value = []
  if (userInfo.token) {
    getRecommendList({
      page: page.value,
      keyword: keyword.value
    }).then(res => {
    loading.value = false
    if (res.code == 1000) {
      setTimeout(() => {
        data.value = res.data
      }, 50)
    }
    if (res.code == 1008) {
      userInfo.SETTOKEN('')
      page.value = 1
      getInit()
    }
  }).catch(err => {
    loading.value = false
  })
  } else { 
    recommendList({
      page: page.value,
      keyword: keyword.value
    }).then(res => {
      loading.value = false
      if (res.code == 1000) {
        setTimeout(() => {
          data.value = res.data
        }, 50)
      }
    }).catch(err => {
      loading.value = false
    })
  }
 }

 const closeBtn = () => {
  isToken.value = false 
 }

 const onChange = () => {
  page.value = 1
  data.value = []
  cbList.value = []
  getInit()
 }

 const handerAlign = () => {
  if (userInfo.token) {
    cbList.value = []
    page.value = page.value + 1
    getInit()
    return
  } else {
    getInit()
  }
  // isToken.value = true 
 }

 const onLogin = () => {
  isToken.value = false
  getInit()
 }

 onLoad(() => {
  WXLOG.info('info', '-------模拟面试-----------', uni.getStorageSync('bytesbayToken'))
  let token = getItem('bytesbayToken') || ''
  userInfo.SETTOKEN(token)
  page.value = 1
  getInit()
 })

 onShow(() => {
  let token = getItem('bytesbayToken') || ''
  userInfo.SETTOKEN(token)
 })
</script>

<style lang="scss" scoped>
.page-warper{
  font-size: 24rpx;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &-content{
    margin: 24rpx 32rpx 0 32rpx;
  }
  &-filter{
    padding: 0 32rpx
  }
  &-body{
    flex:1;
    overflow: hidden;
  }
  &-loading {
    width: 32rpx;
    height: 32rpx;
    background:url('@/static/loading.png') center center no-repeat;
    background-size: 32rpx auto;
    margin: 0 auto;
    animation: rotate 1s linear infinite;
  }
  &-refresh{
    background:url('@/static/refresh.png') center left no-repeat;
    background-size: 32rpx auto;
    padding-left: 32rpx;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    margin: 0 auto
  }
}

@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}

.icon-search{
  width: 32rpx;
  height: 32rpx;
  background:url('@/static/search.png') center center no-repeat;
  background-size: 32rpx auto;
}
</style>